<template>
  <div class="hello">
    <!--基本指令-->
     <input  v-model="searchText" >
      <ul>
        <li v-for="tag in Newtags ">
          {{tag.name}}
        </li>
      </ul>
      <button v-on:click="openAlert">点击一下</button>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return{
      msg: 'Vue Demo',
      searchText:"",
      tags:[{
        id:1,name:"zhangjron",
      },
        {
          id:5,name:"zhangxiaofei",
        },
        {
          id:3,name:"lurong"
        }
      ],
      className:[],
      teacher:'',
      sex:1
    }
  },
  methods:{
    openAlert:function () {
      alert("vue method!")
    },
    selectClassAndTeacher:function () {
      //不用vue.js var vm情况下获取值
      alert("msg="+this.msg+",classNames="+this.className+",teacher="+this.teacher)
    }
  },
  computed:{
    //Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。
    // 官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能
    //使用vue2.0
    //filterBy
    Newtags:function () {
      let that=this;
      return that.tags.filter(function (tag) {
        if (tag.name.indexOf(that.searchText)!=-1){
          return tag.name;
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
